<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue指令</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        <!-- 基础写法用法 -->
        <div v-hello>1111</div>
        <!-- 可以动态传参写法用法 -->
        <div v-arguments="'yellow'">自定义指令-可以传参</div>
    </div>


    <script>
        //自定义指令--核心:操作底层DOM
        // 钩子函数
        // 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

        // bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

        // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

        // update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

        //基础写法用法
        Vue.directive("hello", {
            inserted(el) {
                console.log("当前节点插入到父节点了");
                //inserted指令生命周期--创建--只执行一次
                //如果把inserted改成update,就可以在console里面动态修改了。
                console.log(el);
                el.style.background = "red";
            }
        })

        //可以动态传参写法用法
        Vue.directive("arguments", {
            inserted(el, bind) {
                console.log(el);
                console.log(bind);
                console.log(bind.value);
                el.style.background = bind.value;
            }
        })


        new Vue({
            el: "#box",
            data: {

            }
        })
    </script>
</body>

</html>